<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true" width="1366" @close="cancelFn">
    <el-descriptions :title="infoTitle + '，及格分：' + infoData.passScore" :column="6">
      <el-descriptions-item label="单选题数量">
        <el-tag>{{ infoData.radioSize + ' 道' || 0 }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="多选题数量">
        <el-tag type="warning">{{ infoData.checkboxSize + ' 道' || 0 }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="判断题数量">
        <el-tag type="danger">{{ infoData.judgeSize + ' 道' || 0 }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="单选题分值">
        <el-tag>{{ infoData.radioScore + ' 分' || 0 }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="多选题分值">
        <el-tag type="warning">{{ infoData.checkboxScore + ' 分' || 0 }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="判断题分值">
        <el-tag type="danger">{{ infoData.judgeScore + ' 分' || 0 }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="infoData.exerciseList" height="65vh" border>
      <el-table-column label="题型" width="90" align="center">
        <template #default="scope">
          <el-tag v-show="scope.row.type === 0">单选题</el-tag>
          <el-tag v-show="scope.row.type === 1" type="warning">多选题</el-tag>
          <el-tag v-show="scope.row.type === 2" type="danger">判断题</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="问题" />
      <el-table-column label="问题图片" width="130">
        <template #default="scope">
          <el-image :src="item" fit="cover" :preview-src-list="scope.row.imgs" v-if="scope.row.imgs && scope.row.imgs.length > 0" style="width: 100px;height: 100px;"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="选项">
        <template #default="scope">
          <div v-for="(item, index) in scope.row.options" :key="index">
            <span>{{ item.letter }}、</span>
            <span v-html="item.title"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="correctAnswer" label="正确选项" width="85" align="center" />
      <el-table-column label="用户选项" width="85" align="center">
        <template #default="scope">
          <el-text :type="scope.row.correctAnswer == scope.row.answer ? 'success' : 'danger'">{{ scope.row.answer }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="analysis" label="解析" />
    </el-table>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  infoTitle: {
    type: String
  },
  infoData: {
    type: Object
  }
})
// 关闭
const emit = defineEmits()
function cancelFn() {
  emit('pick', { visible: false })
}
</script>

<style lang="less" scoped>

</style>